
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Accessible Toolbar</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">

	.yui-toolbar {
		border: solid 1px #999;
		background-color: #ccc;
		margin: .25em;
		overflow: auto;
	}

	.yui-toolbar-button {
		display: inline-block;
	    border-width: 1px 0;
	    border-style: solid;
	    border-color: #808080;
	    margin: .25em;
	    font-size: 85%;  /* 11px */
	}

	.yui-toolbar-button span {
		display: inline-block;
	    border-width: 0 1px;
	    border-style: solid;
	    border-color: #808080;
	    margin: 0 -1px;
	    *position: relative;    /* Necessary to get negative margins working in IE */
	    *left: -1px;
	}

	.yui-toolbar-button input {
	    border: none;
	    margin: 0;
		padding: 4px 4px 4px 24px;	
	    *overflow: visible; /* Remove superfluous padding for IE */
		background: transparent url(assets/icons.png) 4px -6px no-repeat;
	}
	
	#add-btn input {
		background-position: 4px -102px;
	}
	
	#edit-btn input {
		background-position: 4px -78px;
	}			

	#print-btn input {
		background-position: 4px -54px;
	}

	#open-btn input {
		background-position: 4px -30px;
	}

	#delete-btn input {
		background-position: 4px -126px;
	}

	#save-btn input {
		background-position: 4px -6px;
	}


	/*	Augment the browser's default styling of the focus state by changing the 
	 	background color of the button when it is focused.	*/

	.yui-toolbar-button input.focus {
		background-color: #B3D4FF;
	}

</style>
<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>Accessible Toolbar</h1>

<div class="exampleIntro">
	<p>
This example illustrates how to create an accessible toolbar using the 
Focus Manager Node Plugin and Node's support for the 
<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>.
</p>			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="toolbar-1" class="yui-toolbar">
	<span id="add-btn" class="yui-toolbar-button"><span><input type="button" name="btn-add" value="Add"></span></span>
	<span id="edit-btn" class="yui-toolbar-button"><span><input type="button" name="btn-edit" value="Edit"></span></span>
	<span id="print-btn" class="yui-toolbar-button"><span><input type="button" name="btn-print" value="Print"></span></span>
	<span id="delete-btn" class="yui-toolbar-button"><span><input type="button" name="btn-delete" value="Delete"></span></span>
	<span id="open-btn" class="yui-toolbar-button"><span><input type="button" name="btn-open" value="Open"></span></span>
	<span id="save-btn" class="yui-toolbar-button"><span><input type="button" name="btn-save" value="Save"></span></span>
</div>

<!-- YUI Seed -->
<script type="text/javascript" src="../../build/yui/yui.js"></script>
<script type="text/javascript">

	YUI({base:"../../build/", timeout: 10000}).use("node-focusmanager", function(Y) {

		//	Retrieve the Node instance representing the toolbar
		//	(<div id="toolbar">) and call the "plug" method 
		//	passing in a reference to the Focus Manager Node Plugin.

		var toolbar = Y.Node.get("#toolbar-1");

		toolbar.plug(Y.Plugin.NodeFocusManager, { 

				descendants: "input",
				keys: { next: "down:39", //	Right arrow
						previous: "down:37" },	//	Left arrow
				focusClass: "focus",
				circular: true

			 });


		//	Set the ARIA "role" attribute of the Node instance representing the 
		//	toolbar to "toolbar" to improve the semantics of the markup for 
		//	users of screen readers.

		toolbar.set("role", "toolbar");


		//	Listen for the click event on each button via the use of the 
		//	"delegate" Custom Event.

		Y.on("delegate", function (event) {

			alert("You clicked " + event.currentTarget.query("input").get("value"));

		}, toolbar, "click", ".yui-toolbar-button");

	});

</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
